import { mapGetters } from "vuex";
import { beautifierConf, deepClone } from "@/utils/index";
import { makeUpJs, makeUpEchartsJs } from "@/components/generator/js";
import {
    makeUpHtml,
    vueTemplate,
    vueScript,
    cssStyle,
} from "@/components/generator/html";
import loadBeautifier from "@/utils/loadBeautifier";
import { makeUpCss } from "@/components/generator/css";
let beautifier = {};
export default {
    data() {
        return {
            formConf: {
                formRef: "elForm",
                formModel: "formData",
                size: "medium",
                labelPosition: "right",
                labelWidth: 100,
                formRules: "rules",
                gutter: 15,
                disabled: false,
                span: 24,
                formBtns: false,
            },
        }
    },
    computed: {
        ...mapGetters(["componentsList"]),
    },
    mounted() {
        loadBeautifier((btf) => {
            beautifier = btf;
        });
    },
    methods: {
        generateCode() {
            // const { type } = this.generateConf
            const type = "file";
            this.AssembleFormData();
            const script = vueScript(makeUpJs(this.formData, type));
            const html = vueTemplate(makeUpHtml(this.formData, type));
            const css = cssStyle(makeUpCss(this.formData));
            return beautifier.html(html + script + css, beautifierConf.html);
        },
        AssembleFormData() {
            this.formData = {
                fields: deepClone(this.componentsList),
                ...this.formConf,
            };
        },
        generateEchartsCode() {
            const type = "file";
            this.AssembleFormData();
            const script = vueScript(makeUpEchartsJs(this.formData, type));
            let str = beautifier.html(script, beautifierConf.html);
            str = str.replace(/<\/script>/gi, "").replace(/<script>/gi, "");
            return str;
        },
    }
}